<template>
  <div class="content-style" >
    <div
        style="margin-left: -240px;margin-top: 40px"
        class="chart_container"
        ref='echarts_con'>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Pie",
  data(){
    return {}
  },
  mounted() {
    this.queryItemInfo()
  },
  methods:{

    queryItemInfo() {
      var self = this;
      self.$axios.get('/echarts/select2').then((res) => {
        if (res.data.code == 200) {
          this.initEcharts(res.data);
        }
      });
    },

    initEcharts(datm){
      var myChart = echarts.init(this.$refs.echarts_con)
      var option;
      var data = []
      for (let i = 0; i < datm.data.length; i++) {
        var item = {
          value: datm.data[i].count,
          name: datm.data[i].name,
        };
        data.push(item);
        console.log(data);
      }
      option = {
        title: {
          text: '我是标题',
          subtext: '我也不知道自己是啥',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: data
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },
  }
}
</script>

<style scoped>
.content-style {
  width: 1300px;
  height: 800px;
  position: absolute;
  left: 240px;
}
.chart_container {
  width: 100%;
  height: 90%;
}
</style>